<template>
    <div class="warpper">

        <div class="container">
            <div class="left">
                <div class="big">
                    <div class="num">4.7</div>
                    <div class="unit">°C</div>
                </div>
                <div class="local">
                    <img src="@/images/corn/plane/local.png" alt=""> <span>长春</span>
                </div>
                <div class="time">
                    <img src="@/images/corn/plane/clock.png" alt=""> <span>{{ time }}</span>
                </div>
                <div class="tips">
                    <div class="tip-item" v-for="(v, k) in state.weatherData" :key="k">
                        <div class="icon">
                            <img :src="v.icon" alt="">
                        </div>
                        <div class="name">{{ v.name }}</div>
                        <div class="value">{{ v.value }}</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="item" v-for="(v, k) in state.forecast" :key="k">
                    <div class="week">
                        {{ v.week }}
                    </div>
                    <div class="day">
                        {{ v.day }}
                    </div>
                    <div class="icon">
                        <img src="@/images/corn/plane/sun.png" alt="">
                    </div>
                    <div class="icon">
                        <img src="@/images/corn/plane/clound.png" alt="">
                    </div>
                    <div class="num">5°C/-6°C </div>
                    <div class="text">微风</div>
                </div>
            </div>
        </div>
        <div class="img">
            <img src="@/images/corn/plane/tower.png" alt="">
        </div>
    </div>

</template>
<script setup>
import moment from "moment";
import { onMounted, reactive } from "vue-demi";
import { weatherData } from './planeData'
const props = defineProps({
    time: String
})
const state = reactive({
    weatherData,
    forecast: [],
})
onMounted(() => {
    state.forecast = getDay(state.forecast)
})
const getWeek = (number) => {
    switch (number) {
        case 1:
            return '周一';
        case 2:
            return '周二';
        case 3:
            return '周三';
        case 4:
            return '周四';
        case 5:
            return '周五';
        case 6:
            return '周六';
        case 7:
            return '周日';
    }
}
const getDay = () => {
    let day1 = moment().format('MM/DD')
    let week1 = '今天'
    let day2 = moment().add(1, 'day').format('MM/DD')
    let week2 = '明天'
    let day3 = moment().add(2, 'day').format('MM/DD')
    let week3 = '后天'
    let day4 = moment().add(3, 'day').format('MM/DD')
    let week4 = getWeek(moment().add(3, 'day').isoWeekday())
    let day5 = moment().add(4, 'day').format('MM/DD')
    let week5 = getWeek(moment().add(4, 'day').isoWeekday())
    let day6 = moment().add(5, 'day').format('MM/DD')
    let week6 = getWeek(moment().add(5, 'day').isoWeekday())
    // let day7 = moment().add(6,'day').format('YY/DD')
    // let week7 = getWeek(moment().add(6,'day'))
    // arr.push()
    return [
        { day: day1, week: week1 },
        { day: day2, week: week2 },
        { day: day3, week: week3 },
        { day: day4, week: week4 },
        { day: day5, week: week5 },
        { day: day6, week: week6 },
    ]
}

</script>
<style lang="scss" scoped>
.warpper{
    height: 94%;
    width:100%;
    display: flex;
    justify-content: space-around;
    .img{
        // marigin
        img{
            width: 88px;
            object-fit: contain;
        }
    }

}
.container {
    padding: 10px;
    width: 86%;
    height: 100%;
    display: flex;
    background: linear-gradient(#16628d, #3f9fd6);

    .left {
        height: 100%;
        width: 40%;
        text-align: center;
        position: relative;

        .big {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);

            .num {
                font-size: 100px;
                // font-weight: 600;
            }

            .unit {
                position: absolute;
                right: 0%;

            }
        }

        .local {
            font-size: 14px;
            color: #fff;
            position: absolute;
            left: 5%;
            top: 5%;

            img {
                width: 12px;
                object-fit: contain;
            }
        }

        .time {
            font-size: 14px;
            color: #fff;
            position: absolute;
            right: 5%;
            top: 5%;

            img {
                width: 12px;
                object-fit: contain;
            }
        }

        .tips {
            position: absolute;
            bottom: 0%;
            left: 5%;
            width: 100%;
            display: flex;
            justify-content: space-around;

            .tip-item {
                font-size: 12px;

                .icon {
                    img {
                        width: 14px;
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .right {
        flex: 1;
        display: flex;

        .item {
            flex: 1;
            height: 100%;
            font-size: 14px;
            text-align: center;

            &:hover {
                background: #115880;
            }

            .icon {
                img {
                    width: 50px;
                    object-fit: contain;
                }
            }
        }
    }
}
</style>